<template>
  <div class="header"></div>
	<div class="content">
    <!-- 左边列表栏 -->
    <div class="left">
      <div class="switch">
        <el-button color="#fff" circle :icon="isCollapse ? Expand:Fold" @click="isCollapse = !isCollapse"/>
        <span v-show="!isCollapse"><el-icon size="18"><Collection /></el-icon> 文章列表 </span>
      </div>
      <el-menu
        default-active="3"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Reading /></el-icon>
            <span>已发布文章</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="(item, index) in blog_list"
              :key="index"
              :index="'1-' + (index + 1)"
              @click="loadArticle(index)"
            >
              {{ item.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><MessageBox /></el-icon>
            <span>草稿箱</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="(item, index) in draft_list"
              :key="index"
              :index="'2-' + (index + 1)"
              @click="loadDraft(index)"
            >
              {{ item.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="3" @click="newArticle">
          <el-icon><Tickets /></el-icon>
          <template #title>新建文章</template>
        </el-menu-item>
        <el-menu-item index="4" disabled>
          <el-icon><setting /></el-icon>
          <template #title>设置(还未实装)</template>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 中间笔记编辑区 -->
		<div class="center">
			<div class="tools">
				<div class="menu">
					<div class="top">
						<button title="edit" @click="edit">Edit</button>
						<button title="view" @click="view(true)">View</button>
            <button title="newNote" @click="reLoad">Reload</button>
            <button title="help" @click="help">Help</button>
            <button title="delete" @click="deleteArticle_or_Draft">Delete</button>
            <button title="downloadNote" @click="downloadNote">Download</button>
            <span> | Blog V1.2 </span>
					</div>
					<div class="bottom">
						<button title="上传" @click="upload"><el-icon size="16"><UploadFilled /></el-icon></button>
            <button title="保存草稿" @click="save_draft" v-if="isdraft"><el-icon size="16"><MessageBox /></el-icon></button>
						<button title="新建行" @click="newLine"><el-icon size="16"><CirclePlus /></el-icon></button>
						<button title="剪切" @click="cut"><el-icon size="16"><Scissor /></el-icon></button>
						<button title="复制" @click="copy"><el-icon size="16"><CopyDocument /></el-icon></button>
						<button title="粘贴" @click="paste"><el-icon size="16"><DocumentCopy /></el-icon></button>
						<button title="上移" @click="moveUp()"><el-icon size="16"><ArrowUp /></el-icon></button>
						<button title="下移" @click="moveDown(true)"><el-icon size="16"><ArrowDown /></el-icon></button>
						<button title="上方新建" @click="newLine_up(true)"><el-icon size="16"><Upload /></el-icon></button>
						<button title="下方新建" @click="newLine_down()"><el-icon size="16"><Upload style="rotate: 180deg;" /></el-icon></button>
						<button title="删除行" @click="deleteLine(true)"><el-icon size="16"><CircleClose /></el-icon></button>
					</div>
				</div>
			</div>
			<div class="main">
				<div class="text">
					<div class="writing" v-if="refresh">
            <!-- 标题行 -->
            <EditBlogLine
              ref="title"
              id="Title"
              :textarea="blog_info.title"
              :fontsize="40"
              color="#409EFF"
              @update-text="updateTitle"
              @choose-line="displayID"
            />
            <!-- 内容行 -->
            <EditBlogLine
              v-for="(item, i) in blog_content"
              :key="i"
              ref="line"
              :id="i.toString()"
              :textarea="item"
              @update-text="updateText($event,i)"
              @choose-line="displayID"
            />
					</div>
				</div>
			</div>
		</div>
    <!-- 右边笔记信息 -->
		<div class="right">
			<div class="note_info">
        <h3>Note-Info</h3>
        <span>
          Author: {{ blog_info.Author }} <br/>
          CreationDate: {{ blog_info.CreationDate }} <br/>
          LastUpdate: {{ blog_info.LastUpdate }} <br/>
          Type: {{ blog_info.type }} <br/>
          Tags: <span v-for="tag in blog_info.Tags" :key="tag"> {{ tag + ' ' }} </span><br/>
          <el-button type="primary" :icon="Edit" @click="tagsEditable = true"/>
          <el-button type="danger" :icon="PictureFilled" @click="imgEditable = true"/>
        </span>
      </div>
      <div class="cell_info">
        <h3>Card-Info</h3>
        <span>
          Number: <span style="color: #409EFF;"> {{ cell_id }} </span> <br/>
          FontSize: {{ cell_font_size }}
        </span>
      </div>
		</div>
	</div>

  <!-- Dialog -- Tags编辑 -->
  <el-dialog
    title="编辑Tags"
    v-model="tagsEditable"
    width="30%"
  >
    <!-- 内嵌表单 -->
    <el-form ref="tagsForm" :model="blog_info" label-width="80px">
      <el-form-item
        v-for="(tag, index) in blog_info.Tags"
        :label="'Tag' + index"
        :key="index"
        :prop="'Tags.' + index"
        :rules="{
          required: true, message: 'Tag不能为空', trigger: 'blur'
        }"
      >
        <el-input v-model="blog_info.Tags[index]" autocomplete="off" style="width: 100px; margin-right: 10px;"/>
        <el-button @click.prevent="removetag(tag)">删除</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addtag()">新增Tag</el-button>
        <el-button type="primary" @click="submitForm(tagsForm)">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- Dialog -- 文章头图 -->
  <el-dialog
    title="文章头图"
    v-model="imgEditable"
    width="30%"
  >
    <!-- 内嵌表单 -->
    <el-form :model="blog_info" label-width="80px">
      <el-form-item label="图片地址">
        <el-input v-model="blog_info.img"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="submitImg">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, nextTick, inject } from 'vue'
import EditBlogLine from '../components/EditBlogLine.vue';
import { Expand, Fold, Edit, Setting, PictureFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import { getArticle_author, getArticle_id, publishArticle, updateArticle, deleteArticle, getDraft, saveDraft, updateDraft, deleteDraft } from '../api/api';
import { useStore } from '../stores';
import { getDate } from '../features/DateTools';
import { v4 as uuidv4 } from 'uuid';

// ===========================列表操作=========================== //
// 是否关闭列表
const isCollapse = ref(false)
// 当前文章是否为草稿/是否显示保存按钮
const isdraft = ref(true)
// Blog列表
const store = useStore()
const blog_list = ref()
const draft_list =ref()
// 初始化文章和草稿箱列表
const initList = () => {
  // 从服务器获取数据，初始化文章列表
  getArticle_author(store.id).then(response => {
    blog_list.value = response.data
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '文章加载失败失败',
      message: error.message,
      type: 'error'
    })
  })
  // 从服务器获取数据，初始化草稿箱列表
  getDraft(store.id).then(response => {
    draft_list.value = response.data
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '草稿箱加载失败失败',
      message: error.message,
      type: 'error'
    })
  })
}
// 初始化
initList()
// 加载文章
const loadArticle = (index) => {
  // 隐藏草稿保存按钮
  if (isdraft.value) {
    isdraft.value = false
  }
  // 写入文章信息
  blog_info.value.id = blog_list.value[index].id
  blog_info.value.img = blog_list.value[index].img
  blog_info.value.title = blog_list.value[index].title
  blog_info.value.CreationDate = blog_list.value[index].CreationDate
  blog_info.value.LastUpdate = blog_list.value[index].LastUpdate
  blog_info.value.Author = blog_list.value[index].Author
  blog_info.value.type = blog_list.value[index].type
  blog_info.value.Tags = blog_list.value[index].Tags
  blog_info.value.isNew = false
  // 写入文章内容
  blog_content.value = blog_list.value[index].content
  // 刷新内容并转为view模式
  refreshing()
  setTimeout(() => {
    view()
  }, 100)
}
// 加载草稿
const loadDraft = (index) => {
  // 显示草稿保存按钮
  if (!isdraft.value) {
    isdraft.value = true
  }
  // 写入文章信息
  blog_info.value.id = draft_list.value[index].id
  blog_info.value.img = draft_list.value[index].img
  blog_info.value.title = draft_list.value[index].title
  blog_info.value.CreationDate = draft_list.value[index].CreationDate
  blog_info.value.LastUpdate = draft_list.value[index].LastUpdate
  blog_info.value.Author = draft_list.value[index].Author
  blog_info.value.type = draft_list.value[index].type
  blog_info.value.Tags = draft_list.value[index].Tags
  blog_info.value.isNew = false
  // 写入文章内容
  blog_content.value = draft_list.value[index].content
  // 刷新内容并转为view模式
  refreshing()
  setTimeout(() => {
    view()
  }, 100)
}
// 新建文章
const newArticle = () => {
  // 显示草稿保存按钮
  if (!isdraft.value) {
    isdraft.value = true
  }
  blog_info.value = {
    id: uuidv4().substring(0, 6),
    img: '',
    title: "Untitled",
    CreationDate: getDate(),
    LastUpdate: getDate(),
    Author: store.name,
    AuthorID: store.id,
    type: "默认分类",
    Tags: [],
    isNew: true // 判断是否为新建
  }
  blog_content.value = ["## 快来写点东西吧~ (｡･∀･)ﾉﾞ\n\n*全文支持markdown语法*"]
  refreshing()
}


// ===========================Blog信息=========================== //
// Blog内容====>初始内容
const blog_info = ref({
  id: uuidv4().substring(0, 6),
  img: '',
  title: "Untitled",
  CreationDate: getDate(),
  LastUpdate: getDate(),
  Author: store.name,
  AuthorID: store.id,
  type: "默认分类",
  Tags: [],
  isNew: true // 判断是否为新建
})
const blog_content = ref([
  "## 快来写点东西吧~ (｡･∀･)ﾉﾞ\n\n*全文支持markdown语法*",
])


// ===========================上传Blog=========================== //
// 上传服务器_发布
const publishBlog = () => {
  // 整理文章信息
  let article_publish = {
    id: 'A' + blog_info.value.id,
    img: blog_info.value.img,
    title: blog_info.value.title,
    CreationDate: blog_info.value.CreationDate,
    LastUpdate: blog_info.value.LastUpdate,
    Author: blog_info.value.Author,
    AuthorID: blog_info.value.AuthorID,
    type: blog_info.value.type,
    likeCount: 0,
    commentsCount: 0,
    shareCount: 0,
    Tags: blog_info.value.Tags,
    content: blog_content.value
  }
  publishArticle(article_publish).then(response => {
    // 上传后刷新
    reloadList()
    ElNotification({
      title: '发布成功',
      message: '(๑•̀ㅂ•́)و✧快去和小伙伴们分享你的著作吧',
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '发布失败',
      message: error.message,
      type: 'error'
    })
  })
}
// 上传服务器_更新
const updateBlog = () => {
  let article_update = {
    id: blog_info.value.id,
    img: blog_info.value.img,
    title: blog_info.value.title,
    CreationDate: blog_info.value.CreationDate,
    LastUpdate: getDate(),
    Author: blog_info.value.Author,
    AuthorID: blog_info.value.AuthorID,
    type: blog_info.value.type,
    Tags: blog_info.value.Tags,
    content: blog_content.value
  }
  updateArticle(article_update.id, article_update).then(response => {
    // 上传后刷新
    reloadList()
    ElNotification({
      title: '更新成功',
      message: '(๑•̀ㅂ•́)و✧快去和小伙伴们分享你的著作吧',
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '更新失败',
      message: error.message,
      type: 'error'
    })
  })
}
// 删除文章
const deleteBlog = () => {
  deleteArticle(blog_info.value.id).then(response => {
    ElNotification({
      title: '删除成功',
      message: '已成功删除该文章',
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '删除失败',
      message: error.message,
      type: 'error'
    })
  })
}

// ===========================保存草稿=========================== //
// 保存草稿
const save_draft = () => {
  // 整理草稿信息
  let drfat_save = {
    id: blog_info.value.id,
    img: blog_info.value.img,
    title: blog_info.value.title,
    CreationDate: blog_info.value.CreationDate,
    LastUpdate: blog_info.value.LastUpdate,
    Author: blog_info.value.Author,
    AuthorID: blog_info.value.AuthorID,
    type: blog_info.value.type,
    likeCount: 0,
    commentsCount: 0,
    shareCount: 0,
    Tags: blog_info.value.Tags,
    content: blog_content.value
  }
  // 判断是否为新建草稿 是则post 不是则patch
  if (blog_info.value.isNew) {
    // post
    saveDraft(drfat_save).then(response => {
      ElNotification({
        title: '保存成功',
        message: '已保存到草稿箱',
        type: 'success'
      })
    }).catch(error => {
      console.log(error)
      ElNotification({
        title: '保存失败',
        message: error.message,
        type: 'error'
      })
    })
  } else {
    // patch
    updateDraft(drfat_save.id, drfat_save).then(response => {
      ElNotification({
        title: '保存成功',
        message: '已保存到草稿箱',
        type: 'success'
      })
    }).catch(error => {
      console.log(error)
      ElNotification({
        title: '保存失败',
        message: error.message,
        type: 'error'
      })
    })
  }
  // 上传后刷新
  reloadList()
}
// 删除草稿
const delete_Draft = (notify) => {
  deleteDraft(blog_info.value.id).then(response => {
    if (!notify) {
      ElNotification({
        title: '删除成功',
        message: '已成功删除该草稿',
        type: 'success'
      })
    }
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '删除失败',
      message: error.message,
      type: 'error'
    })
  })
}
// 发布草稿
const publish_Draft = () => {
  // 上传后删除
  publishBlog()
  delete_Draft(true)
}


// ===========================右侧信息栏=========================== //
// Cell信息
const cell_id = ref('0')
const cell_font_size = ref(20)

// 单元格emits
const displayID = (val) => {         // 展示当前单元格ID
  cell_id.value = val
  if (val == 'Title') {
    cell_font_size.value = 40
  } else {
    cell_font_size.value = 20
  }
}
const updateText = (val, i) => {     // 根据当前编辑更新文本内容
  blog_content.value[i] = val
}
const updateTitle = (val) => {       // 更新标题
  blog_info.value.title = val
}

// 开启tag编辑
const tagsEditable = ref(false)
// 表单dom
const tagsForm = ref()

const addtag = () => {              // 新增tag
  blog_info.value.Tags.push('')
}
const removetag = (item) => {       // 移除tag
  const index = blog_info.value.Tags.indexOf(item)
  if (index !== -1) {
    blog_info.value.Tags.splice(index, 1)
  }
}
const submitForm = (formEl) => {    // 提交表单
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      tagsEditable.value = false
      ElNotification({
        title: '修改成功',
        message: 'Tags已修改',
        type: 'success'
      })
    } else {
      ElNotification({
        title: 'ERROR',
        message: '更新Tags失败',
        type: 'error'
      })
      return false
    }
  })
}

// 编辑文章头图
const imgEditable = ref(false)
const submitImg = () => {
  imgEditable.value = false
  ElNotification({
    title: '修改成功',
    message: '文章头图已修改',
    type: 'success'
  })
}


// ===========================顶部工具栏=========================== //
// 标题和每一个单元格的dom title、line[]
const title = ref()
const line = ref()

const edit = async() => {            // 切换为编辑模式
  title.value.switchShowTo(false)
  for(let item of line.value) {
    item.switchShowTo(false)
  }
  ElNotification({
    title: '编辑模式',
    message: '已切换到编辑模式',
    type: 'info'
  })
}
const view = async(notify) => {      // 切换为浏览模式
  title.value.switchShowTo(true)
  for(let item of line.value) {
    item.switchShowTo(true)
  }
  if (notify) {
    ElNotification({
      title: '浏览模式',
      message: '已切换到浏览模式',
      type: 'info'
    })
  }
}
onMounted(() =>{view()})             // 初始状态为浏览
const reLoad = () => {
  ElMessageBox.confirm(
    '未保存的内容将会离你而去ヽ(*。>Д<)o゜',
    '重新加载前记得保存哦',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    reloadList()
    ElNotification({
      title: '刷新成功',
      message: '已重新加载',
      type: 'success'
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })
}
const help = () => {                 // 帮助说明
  let helptext = `
    <p>
      使用说明:<br/>
      1.Edit切换到编辑模式<br/>
      2.View切换到浏览模式<br/>
      3.Reload刷新所有内容<br/>
      4.Delete删除该文章<br/>
      5.Download下载该文档<br/>
      6.选中单元格后双击切换模式<br/>
      7.下方按钮，鼠标悬停可查看功能描述
    </p>
  `;
  ElMessageBox.alert(helptext, {
      confirmButtonText: '确定',
      dangerouslyUseHTMLString: true
    }
  )
}
const deleteArticle_or_Draft = () =>{// 删除文章
  ElMessageBox.confirm(
    '确定要删除该文章吗？该操作将无法撤销。',
    'Warning',
    {
      confirmButtonText: '确认删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 判断是否为新建
    if (blog_info.value.isNew) {
      ElNotification({
        title: '不能删除！',
        message: '还没上传呢！',
        type: 'error'
      })
      return false
    }
    // 判断是否为草稿
    if (isdraft.value) {
      // 是则删除调用草稿
      delete_Draft()
    } else {
      // 不是则调用删除文章
      deleteBlog()
    }
    // 删除后刷新
    reloadList()
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })
}
const downloadNote = () => {         // 下载按钮
  let text = `
    <p>
      该功能还未实装
    </p>
  `;
  ElMessageBox.alert(text, '假的', {
      confirmButtonText: '哦',
      dangerouslyUseHTMLString: true
    }
  )
}


// ===========================底部工具栏=========================== //
const upload = () => {               // 保存上传服务器
  // 先判断是否为新建
  if (blog_info.value.isNew) {
    // 为新建直接上传
    publishBlog()
    return
  }
  // 判断是否为草稿
  if (isdraft.value) {
    // 是则上传草稿
    publish_Draft()
  } else {
    // 不是则上传文章
    // 先查询是否有该id的文章
    getArticle_id(blog_info.value.id).then(response => {
      if (response.data.length < 1) {
        // 没有该id，上传文章
        publishBlog()
      } else {
        // 有该id，更新文章
        updateBlog()
      }
    }).catch(error => console.log(error))
  }
}
const newLine = () => {              // 尾部新建单元格
  blog_content.value.push('')
  ElNotification({
    title: '新建成功',
    message: '已在尾行添加单元格',
    type: 'success'
  })
}
//剪切板
const copy_board = ref('')
const cut = () => {                  // 剪切
  if (notTitle()) {
    copy_board.value = blog_content.value[Number(cell_id.value)]
    deleteLine()
    ElNotification({
      title: '已剪切',
      message: '剪切板：<br/>' + copy_board.value,
      dangerouslyUseHTMLString: true,
      type: 'success'
    })
  } else {
    ElNotification({
      title: 'Warning',
      message: '标题不能剪切，已转为复制',
      type: 'warning'
    })
  }
}
const copy = () => {                 // 复制
  if (notTitle()) {
    copy_board.value = blog_content.value[Number(cell_id.value)]
  } else {
    copy_board.value = blog_info.value.title
  }
  ElNotification({
    title: '已复制',
    message: '剪切板：<br/>' + copy_board.value,
    dangerouslyUseHTMLString: true,
    type: 'success'
  })
}
const paste = () => {                // 粘贴
  if (notTitle()) {
    newLine_up()
    blog_content.value[cell_id.value] = copy_board.value
    ElNotification({
      title: '已粘贴',
      message: '粘贴到第' + cell_id.value + '行',
      type: 'success'
    })
  } else {
    ElNotification({
      title: 'Error',
      message: '标题上方不能粘贴',
      type: 'error'
    })
  }
}
const moveUp = () => {               // 当前单元格上移
  if (notTitle()) {
    let num = Number(cell_id.value)
    if (num < 1) {
      ElNotification({
        title: 'Error!',
        message: '上方没有单元格了',
        type: 'error'
      })
      return false // 上方没有空间
    } else {
      exchangeCells(num, num - 1)
      cell_id.value = String(num - 1)
      ElNotification({
        title: '上移成功',
        message: '已将第' + num + '行单元格移至第' + cell_id.value + '行',
        type: 'success'
      })
    }
  } else {
    ElNotification({
      title: '打咩！',
      message: '标题不能动',
      type: 'error'
    })
    return false
  }
}
const moveDown = (notify) => {       // 当前单元格下移
  if (notTitle()) {
    let num = Number(cell_id.value)
    exchangeCells(num, num + 1)
    cell_id.value = String(num + 1)
    if (notify) {
      ElNotification({
        title: '下移成功',
        message: '已将第' + num + '行单元格移至第' + cell_id.value + '行',
        type: 'success'
      })
    }
    return true
  } else {
    ElNotification({
      title: '打咩！',
      message: '标题不能动',
      type: 'error'
    })
    return false
  }
}
const newLine_up = (notify) => {     // 上方新建单元格
  if (notTitle()) {
    blog_content.value.splice(Number(cell_id.value), 0, "")
    refreshing()
    if (notify) {
      ElNotification({
        title: '新建成功',
        message: '已在第' + cell_id.value + '行新建单元格',
        type: 'success'
      })
    }
    return true
  } else {
    ElNotification({
      title: 'Error',
      message: '标题不添加',
      type: 'error'
    })
    return false
  }
}
const newLine_down = () => {         // 下方新建单元格
  if (!newLine_up()) {
    return false
  }
  moveDown()
  ElNotification({
    title: '新建成功',
    message: '已在第' + cell_id.value + '行新建单元格',
    type: 'success'
  })
  return true
}
const deleteLine = (notify) => {     // 删除单元格
  if (notTitle()) {
    blog_content.value.splice(Number(cell_id.value), 1)
    refreshing()
    if (notify) {
      ElNotification({
        title: '已删除',
        message: '已删除第' + cell_id.value + '行',
        type: 'success'
      })
    }
  } else {
    ElNotification({
      title: 'Stop!',
      message: '为什么要删标题啊kora!',
      type: 'error'
    })
  }
}


// ===========================常用方法工具箱=========================== //
// 判断当前cellID是否为Title 不是返回true 是则返回false
const notTitle = () => {
  if (cell_id.value == 'Title') {
    return false
  } else {
    return true
  }
}
// 刷新编辑框
const refresh = ref(true)
const refreshing = () => {
  refresh.value = false
  nextTick(() => refresh.value = true)
}
// 输入id 交换两个单元格位置
const exchangeCells = (id_1, id_2) => {
  let temp = blog_content.value[id_1]
  blog_content.value[id_1] = blog_content.value[id_2]
  blog_content.value[id_2] = temp
  // 交换后刷新整个编辑框
  refreshing()
}
// reload页面 从app.vue调用的方法
const reloadPage = inject('Reload')
// 重新拉取列表并重新加载界面
const reloadList = () => {
  initList()
  reloadPage()
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.header {
  height: 4.5rem;
  width: 100%;
  background-color: #4dcdef;
}
.content {
  height: calc(100% - 4.5rem);
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.left {
  height: 100%;
  /* width: 15%; */
  width: fit-content;
  float: left;
}
.switch {
  margin: 20px 0 10px 0;
  display: flex;
  flex-direction: row-reverse;
  padding: 0 15px;
}
.switch > span {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.right {
  height: fit-content;
  width: 250px;
  position: relative;
  float: left;
  box-sizing: border-box;
  border-left: 1px solid #eeeeee;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.right > div {
  width: 100%;
  margin-top: 1rem;
}
.right > div > h3 {
  border-bottom: 1px solid #eeeeee;
  color: #000;
  font-size: 22px;
  font-weight: 600;
}
.right > div > span {
  font-size: 17px;
  line-height: 40px;
  font-weight: 500;
  color: #000;
}
.note_info {
  height: 20rem;
}
.cell_info {
  height: 10rem;
}
.center {
  height: 100%;
  /* width: 70%; */
  flex: 1;
  position: relative;
  float: left;
  -webkit-transition: width 1s;
  transition: width 1s; /* Safari */
}

.tools {
  height: 80px;
  width: 100%;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  border-bottom: 1px solid #eeeeee;
}

.menu {
  height: 100%;
  width: 90%;
  margin: 0 auto;
}

.top {
  height: 50%;
  width: 100%;
  background-color: #f8f8f8;
  border-radius: 0px 0px 5px 5px;
  box-sizing: border-box;
  border: 2px solid #e7e7e7;
  border-top: 0px;
}

.bottom {
  height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
}

.main {
  height: calc(100% - 100px);
  /* height: 75vh; */
  width: 100%;
	background-color: #fff;
  position: relative;
  box-shadow: 0px 20px 30px -30px inset rgba(0, 0, 0, 0.2);
  /* 父容器开启flex布局 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  overflow-y: auto;
}

.main::-webkit-scrollbar {
  width: 5px !important;
}

.text {
  margin-top: 20px;
  margin-bottom: 3px;
  height: fit-content;
  width: 90%;
  min-height: 540px;
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: .25rem;
}

.top > button {
  height: 100%;
  width: 50px;
  margin: 0px;
  background-color: transparent;
  border: 0px;
  color: #808080;
}

.top > button:hover {
  color: #353535;
}

.top > button:active {
  /* color: #000; */
  color: dodgerblue;
}

.top > span {
  float: right;
  font-size: 20px;
  line-height: 40px;
  color: #808080;
  padding-right: 2%;
}

.bottom > button {
  height: 70%;
  width: 32px;
  margin-right: 10px;
  background-color: #f8f8f8;
  border: 2px solid #e7e7e7;
  border-radius: 2px;
  /* 父容器开启flex布局 */
  display: flex;
  /* 水平垂直居中 */
  justify-content: center;
  align-items: center;
}

.bottom > button:hover {
  background-color: #e7e7e7;
}

.bottom > button:active {
  background-color: #cecece;
}

.info_card {
  height: 50%;
  width: 100%;
  display: flex;
  /* 水平垂直居中 */
  justify-content: center;
  align-items: center;
}

.noteinfo_card {
  height: 90%;
  width: 90%;
  border-radius: 5px;
  background-color: #fff;
}

.cellinfo_card {
  height: 90%;
  width: 90%;
  border-radius: 5px;
  background-color: #fff;
}

.card_title {
  height: 40px;
  width: 100%;
  font-size: 20px;
  font-weight: 600;
  line-height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #eeeeee;
  padding-left: 10px;
}

.card_text {
  height: calc(100% - 50px);
  width: calc(100% - 10px);
  line-height: 16px;
  line-height: 30px;
  padding-left: 10px;
  padding-top: 10px;
}

.writing {
  height: fit-content;
  width: 90%;
  margin: 0 auto;
  padding-top: 20px;
}
</style>

<style>
img {
  max-width: 100%;
}
</style>